<template>
  <div>
    <scroll class="wrapper">
      <div
        class="content"
        ref="goodswrapper"
        v-for="(goods, index) in goodsList"
      >
        <div class="demo">
          <div @click="toGoodDetail(goods)">
            <div class="demo-left left">
              <img :src="goods.goodsImgUrl" />
            </div>
            <div class="demo-right">
              <div class="goods_name ellipsis">{{ goods.goodsName }}</div>
              <div class="goods_sku_sale">
                <span class="goods_sku">{{ goods.specificationName }}</span>
              </div>
              <div class="goods_price_cart">
                <div class="goods_price left">￥{{ goods.oldPrice }}</div>
                <div class="goods_cart right">
                  <img
                    v-if="goods.buyNum"
                    src="../../images/minus.png"
                    @click.stop.prevent="minusCartGoods(index)"
                  />
                  <div
                    v-if="goods.buyNum"
                    class="cart_num"
                    :id="'goods' + item.goodsId"
                  >
                    {{ goods.buyNum }}
                  </div>
                  <img
                    src="../../images/add.png"
                    @click.stop.prevent="addCartGoods(index)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading-wrapper"></div>
    </scroll>
    <div class="clear"></div>
    <alert-tip
      v-if="showAlert"
      @closeTip="showAlert = false"
      :alertText="alertText"
    ></alert-tip>
    <!-- 多规格弹出框 -->
    <multi-spec-model
      v-show="showMultiSpec"
      @hideMultiSpec="hideMultiSpec"
      :item="item"
      @addCart="addCart"
      @minusCart="minusCart"
    ></multi-spec-model>
  </div>
</template>

<script>
import scroll from "src/components/common/scroll";
import { mapMutations, mapState } from "vuex";
import alertTip from "src/components/common/alertTip";
import multiSpecModel from "src/components/common/multiSpecModel";
import { imgToSamll } from "src/config/mUtils";
import { listGoods } from "src/service/brand";
import {
  addCart,
  selectCartNum,
  findGoodsByBnameOrGoodsName,
} from "src/service/category";

export default {
  props: {
    /**
     * 列表的数据
     */
    data: {
      type: Array,
      default: null,
    },
    /**
     * 数据是否加载完成，用于上拉加载
     */
    loadFinish: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否派发滚动到底部的事件，用于上拉加载
     */
    pullup: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否派发顶部下拉的事件，用于下拉刷新
     */
    pulldown: {
      type: Boolean,
      default: false,
    },
    /**
     * 如果启用loading交互，传递loading的状态
     * isShow: false
     * showIcon: false,    // 是否显示loading的icon
     * status: ''  // '正在加载...', '加载完成', '刷新失败', ''
     * 下拉刷新loading
     */
    loadingDownStatus: {
      type: Object,
      default: function () {
        return {
          isShow: false,
          isRefreshFinished: false,
          status: "",
        };
      },
    },
    /**
     * 如果启用loading交互，传递loading的状态
     * isShow: false
     * status: ''  // '正在加载...', '加载完成', '刷新失败', ''
     * 上拉加载loading
     */
    loadingUpStatus: {
      type: Object,
      default: function () {
        return {
          isShow: false,
          status: "",
        };
      },
    },
    // 默认已经显示出10条数据 count等于一是让从11条开始加载
    counter: {
      type: Number,
      default: 1,
    },
    // 一次显示多少条
    num: {
      type: Number,
      default: 10,
    },
    // 开始页数
    pageStart: {
      type: Number,
      default: 1,
    },
    // 结束页数
    pageEnd: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      alertText: "",
      showAlert: false,
      showMultiSpec: false,
      item: {},
      spec: {},
      imgToSamll,
      goodsList: [],
      // 查询参数
      queryParams: {},
    };
  },
  mounted() {},
  created() {
    this.getGoodsList();
  },
  computed: {
    ...mapState(["userInfo", "cartList"]),
    /**
     * 监听cartList变化，更新当前用户的购物车信息userCart，同时返回一个新的对象
     */
    userCart: function () {
      return Object.assign({}, this.cartList[this.userInfo.id]);
    },
  },
  components: {
    scroll,
    alertTip,
    multiSpecModel,
  },
  methods: {
    ...mapMutations(["ADD_CART", "REDUCE_CART"]),

    getGoodsList() {
      this.queryParams.brandId = this.$route.query.brandId;
      this.queryParams.isRecommond = this.$route.query.isRecommond;
      this.queryParams.bnameOrGoodsName = this.$route.query.key;
      console.log(123);
      console.log(this.queryParams);
      findGoodsByBnameOrGoodsName(this.queryParams).then((response) => {
        response.data.data.forEach((item) => {
          item.buyNum = 0;
          selectCartNum(item).then((response) => {
            item.buyNum = response.data.data;
          });
        });
        this.goodsList = response.data.data;
      });
    },

    async loadRefreshData() {},
    async loadData() {},
    scrollToTop() {},
    //cart变化的时候重新计算当前商品的数量
    foodNum: function (item) {
      let buyNum = 0;
      return buyNum;
    },
    specGoodNum(spec) {},

    minusCartGoods(index) {
      if (this.goodsList[index].buyNum == 0) {
        this.goodsList[index].buyNum = 0;
      } else {
        this.goodsList[index].buyNum -= 1;
      }
      this.addCart(this.goodsList[index]);
    },
    addCartGoods(index) {
      this.goodsList[index].buyNum += 1;
      this.addCart(this.goodsList[index]);
    },

    minusCart(spec) {},
    //加入购物车
    addCart(goods) {
      addCart(goods).then((response) => {});
    },
    hideMultiSpec() {
      this.showMultiSpec = false;
    },
    toGoodDetail(goods) {
      this.$router.push({
        path: "/goodsDetail",
        query: { id: goods.specificationId },
      });
    },
  },
  watch: {},
};
</script>

<style lang="scss">
@import "src/style/mixin";

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.demo {
  @include wh(100%, 2.1rem);
  background: #fff;
  clear: both;
  border-bottom: 0.01rem solid #d6d6d6;

  .demo-left {
    margin: 0.2rem;
    position: relative;
    @include wh(1.7rem, 1.7rem);

    img {
      @include wh(100%, 100%);
    }

    .goods_check {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0.4rem;
      background: rgba(0, 0, 0, 0.6);
      @include sc(0.24rem, #fff);
      line-height: 0.4rem;
      text-align: center;
    }
  }

  .demo-right {
    padding-top: 0.3rem;
    padding-left: 2.1rem;
    margin-right: 0.2rem;

    .goods_name {
      @include sc(0.3rem, #333);
      line-height: 0.3rem;
      height: 0.3rem;
    }

    .goods_sku_sale {
      margin-top: 0.2rem;
      height: 0.24rem;
      line-height: 0.24rem;
      @include sc(0.24rem, #999);

      .goods_sku {
        margin-right: 0.28rem;
        @include sc(0.24rem, #999);
      }

      .goods_sale {
        @include sc(0.24rem, #999);
      }
    }

    .goods_price_cart {
      height: 0.54rem;
      margin-top: 0.35rem;
      line-height: 0.54rem;

      .goods_price {
        display: inline-block;
        @include sc(0.36rem, #ffa101);
      }

      .goods_cart {
        display: flex;

        img {
          flex: 1;
          @include wh(0.54rem, 0.54rem);
        }

        .cart_num {
          flex: 1;
          line-height: 0.54rem;
          @include wh(0.54rem, 0.54rem);
          text-align: center;
        }
      }
    }
  }
}
</style>
